<template>
  <div class="statistics-page">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="page-breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/statistics">统计分析中心</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>轮回数据分析</a-breadcrumb-item>
      <a-breadcrumb-item>六道分布统计</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面标题 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="ancient-title">六道分布统计</div>
        <div class="header-subtitle">阴曹地府 · 轮回道路分析</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="4">
          <div class="stat-card human-realm">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">人道</div>
              <div class="stat-value">{{ humanRatio }}%</div>
              <div class="stat-label">最高占比</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="4">
          <div class="stat-card heaven-realm">
            <div class="stat-icon">
              <CloudOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">天道</div>
              <div class="stat-value">{{ heavenRatio }}%</div>
              <div class="stat-label">较高占比</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="4">
          <div class="stat-card asura-realm">
            <div class="stat-icon">
              <ThunderboltOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">阿修罗道</div>
              <div class="stat-value">{{ asuraRatio }}%</div>
              <div class="stat-label">中等占比</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="4">
          <div class="stat-card animal-realm">
            <div class="stat-icon">
              <BugOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">畜生道</div>
              <div class="stat-value">{{ animalRatio }}%</div>
              <div class="stat-label">中等占比</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="4">
          <div class="stat-card ghost-realm">
            <div class="stat-icon">
              <EyeInvisibleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">饿鬼道</div>
              <div class="stat-value">{{ ghostRatio }}%</div>
              <div class="stat-label">较低占比</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="4">
          <div class="stat-card hell-realm">
            <div class="stat-icon">
              <FireOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">地狱道</div>
              <div class="stat-value">{{ hellRatio }}%</div>
              <div class="stat-label">最低占比</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要图表区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 六道分布饼图 -->
        <a-col :xs="24" :lg="12">
          <a-card title="六道分布概览" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="pieChartType" style="width: 120px">
                <a-select-option value="total">总体分布</a-select-option>
                <a-select-option value="monthly">本月分布</a-select-option>
                <a-select-option value="yearly">年度分布</a-select-option>
              </a-select>
            </template>
            <div class="echarts-container">
              <v-chart :option="sixRealmsPieOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 六道趋势变化 -->
        <a-col :xs="24" :lg="12">
          <a-card title="六道分布趋势变化" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="trendPeriod" style="width: 120px">
                <a-select-option value="12">近12月</a-select-option>
                <a-select-option value="24">近2年</a-select-option>
                <a-select-option value="60">近5年</a-select-option>
              </a-select>
            </template>
            <div class="echarts-container">
              <v-chart :option="realmsTrendOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 六道流入流出分析 -->
        <a-col :xs="24">
          <a-card title="六道流入流出分析" :bordered="false" class="chart-card">
            <template #extra>
              <a-space>
                <a-select v-model:value="flowType" style="width: 120px">
                  <a-select-option value="inout">流入流出</a-select-option>
                  <a-select-option value="net">净流入</a-select-option>
                  <a-select-option value="balance">平衡度</a-select-option>
                </a-select>
                <a-button @click="exportFlowData">
                  <DownloadOutlined />
                  导出数据
                </a-button>
              </a-space>
            </template>
            <div class="echarts-container">
              <v-chart :option="flowAnalysisOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 六道转换矩阵 -->
        <a-col :xs="24" :lg="14">
          <a-card title="六道转换热力图" :bordered="false" class="chart-card">
            <div class="echarts-container">
              <v-chart :option="transferMatrixOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 六道统计报告 -->
        <a-col :xs="24" :lg="10">
          <a-card title="六道分布分析报告" :bordered="false" class="report-card">
            <div class="report-content">
              <div class="report-section">
                <h4>分布特点</h4>
                <div class="status-item">
                  <div class="status-indicator positive"></div>
                  <span>人道占比最高</span>
                </div>
                <div class="status-item">
                  <div class="status-indicator neutral"></div>
                  <span>天道比例稳定</span>
                </div>
                <div class="status-item">
                  <div class="status-indicator warning"></div>
                  <span>地狱道比例较低</span>
                </div>
              </div>

              <div class="report-section">
                <h4>变化趋势</h4>
                <ul class="trend-list">
                  <li>人道比例持续增长</li>
                  <li>天道比例波动上升</li>
                  <li>阿修罗道相对稳定</li>
                  <li>三恶道呈下降趋势</li>
                </ul>
              </div>

              <div class="report-section">
                <h4>平衡建议</h4>
                <ul class="suggestion-list">
                  <li>加强功德引导</li>
                  <li>优化业力评估</li>
                  <li>完善转世机制</li>
                  <li>提升整体素质</li>
                </ul>
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 六道年龄分布 -->
        <a-col :xs="24">
          <a-card title="六道年龄分布分析" :bordered="false" class="chart-card">
            <template #extra>
              <a-space>
                <a-radio-group v-model:value="ageViewType" button-style="solid" size="small">
                  <a-radio-button value="absolute">绝对数量</a-radio-button>
                  <a-radio-button value="percentage">百分比</a-radio-button>
                </a-radio-group>
              </a-space>
            </template>
            <div class="echarts-container">
              <v-chart :option="ageDistributionOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 详细数据表格 -->
    <div class="table-section">
      <a-card title="六道详细统计数据" :bordered="false">
        <template #extra>
          <a-space>
            <a-input-search v-model:value="searchKeyword" placeholder="搜索道路名称" style="width: 200px" @search="handleSearch" />
            <a-button @click="exportData">
              <ExportOutlined />
              导出全部
            </a-button>
          </a-space>
        </template>
        <a-table :columns="tableColumns" :data-source="tableData" :pagination="tablePagination" :loading="tableLoading" :scroll="{ x: 1600 }" @change="handleTableChange" />
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import { UserOutlined, CloudOutlined, ThunderboltOutlined, BugOutlined, EyeInvisibleOutlined, FireOutlined, DownloadOutlined, ExportOutlined } from '@ant-design/icons-vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, PieChart, HeatmapChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, ToolboxComponent, VisualMapComponent } from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([CanvasRenderer, LineChart, BarChart, PieChart, HeatmapChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, ToolboxComponent, VisualMapComponent])

// 响应式数据
const loading = ref(false)
const pieChartType = ref('total')
const trendPeriod = ref('12')
const flowType = ref('inout')
const ageViewType = ref('absolute')
const searchKeyword = ref('')
const tableLoading = ref(false)

// 核心指标数据
const humanRatio = ref(38.5)
const heavenRatio = ref(22.3)
const asuraRatio = ref(15.8)
const animalRatio = ref(12.4)
const ghostRatio = ref(7.2)
const hellRatio = ref(3.8)

// 表格配置
const tableColumns = reactive([
  {
    title: '道路名称',
    dataIndex: 'realm',
    key: 'realm',
    fixed: 'left',
    width: 120
  },
  {
    title: '总数量',
    dataIndex: 'totalCount',
    key: 'totalCount',
    sorter: true
  },
  {
    title: '占比',
    dataIndex: 'percentage',
    key: 'percentage',
    sorter: true,
    render: (value) => `${value}%`
  },
  {
    title: '本月新增',
    dataIndex: 'monthlyNew',
    key: 'monthlyNew',
    sorter: true
  },
  {
    title: '流入数量',
    dataIndex: 'inflowCount',
    key: 'inflowCount',
    sorter: true
  },
  {
    title: '流出数量',
    dataIndex: 'outflowCount',
    key: 'outflowCount',
    sorter: true
  },
  {
    title: '净流入',
    dataIndex: 'netInflow',
    key: 'netInflow',
    sorter: true,
    render: (value) => {
      const color = value > 0 ? '#52c41a' : value < 0 ? '#ff4d4f' : '#1890ff'
      const prefix = value > 0 ? '+' : ''
      return {
        children: `${prefix}${value}`,
        style: { color }
      }
    }
  },
  {
    title: '平均转换时间',
    dataIndex: 'avgTransferTime',
    key: 'avgTransferTime',
    sorter: true,
    render: (value) => `${value}天`
  },
  {
    title: '变化趋势',
    dataIndex: 'trend',
    key: 'trend',
    render: (value) => {
      const color = value > 0 ? '#52c41a' : value < 0 ? '#ff4d4f' : '#1890ff'
      const icon = value > 0 ? '↗' : value < 0 ? '↘' : '→'
      return {
        children: `${icon} ${Math.abs(value)}%`,
        style: { color }
      }
    }
  }
])

const tableData = ref([])
const tablePagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条记录`
})

// 图表配置项
const sixRealmsPieOption = computed(() => ({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    textStyle: { color: '#e6f7ff' }
  },
  series: [
    {
      name: '六道分布',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 38.5, name: '人道', itemStyle: { color: '#52c41a' } },
        { value: 22.3, name: '天道', itemStyle: { color: '#1890ff' } },
        { value: 15.8, name: '阿修罗道', itemStyle: { color: '#722ed1' } },
        { value: 12.4, name: '畜生道', itemStyle: { color: '#fa8c16' } },
        { value: 7.2, name: '饿鬼道', itemStyle: { color: '#eb2f96' } },
        { value: 3.8, name: '地狱道', itemStyle: { color: '#f5222d' } }
      ]
    }
  ]
}))

const realmsTrendOption = computed(() => ({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['人道', '天道', '阿修罗道', '畜生道', '饿鬼道', '地狱道'],
    textStyle: { color: '#e6f7ff' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: generateTimeData(),
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' },
    splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
  },
  series: [
    {
      name: '人道',
      type: 'line',
      stack: 'Total',
      areaStyle: { color: 'rgba(82, 196, 26, 0.3)' },
      data: generateRealmTrendData('human')
    },
    {
      name: '天道',
      type: 'line',
      stack: 'Total',
      areaStyle: { color: 'rgba(24, 144, 255, 0.3)' },
      data: generateRealmTrendData('heaven')
    },
    {
      name: '阿修罗道',
      type: 'line',
      stack: 'Total',
      areaStyle: { color: 'rgba(114, 46, 209, 0.3)' },
      data: generateRealmTrendData('asura')
    },
    {
      name: '畜生道',
      type: 'line',
      stack: 'Total',
      areaStyle: { color: 'rgba(250, 140, 22, 0.3)' },
      data: generateRealmTrendData('animal')
    },
    {
      name: '饿鬼道',
      type: 'line',
      stack: 'Total',
      areaStyle: { color: 'rgba(235, 47, 150, 0.3)' },
      data: generateRealmTrendData('ghost')
    },
    {
      name: '地狱道',
      type: 'line',
      stack: 'Total',
      areaStyle: { color: 'rgba(245, 34, 45, 0.3)' },
      data: generateRealmTrendData('hell')
    }
  ]
}))

const flowAnalysisOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['流入', '流出', '净流入'],
    textStyle: { color: '#e6f7ff' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['人道', '天道', '阿修罗道', '畜生道', '饿鬼道', '地狱道'],
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: [
    {
      type: 'value',
      name: '数量',
      axisLine: { lineStyle: { color: '#40a9ff' } },
      axisLabel: { color: '#91d5ff' },
      splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
    },
    {
      type: 'value',
      name: '净流入',
      axisLine: { lineStyle: { color: '#40a9ff' } },
      axisLabel: { color: '#91d5ff' },
      splitLine: { show: false }
    }
  ],
  series: [
    {
      name: '流入',
      type: 'bar',
      data: [15400, 8900, 6300, 4200, 2800, 1200],
      itemStyle: { color: '#52c41a' }
    },
    {
      name: '流出',
      type: 'bar',
      data: [12800, 7200, 5800, 4800, 3200, 1800],
      itemStyle: { color: '#ff4d4f' }
    },
    {
      name: '净流入',
      type: 'line',
      yAxisIndex: 1,
      data: [2600, 1700, 500, -600, -400, -600],
      lineStyle: { color: '#1890ff', width: 3 },
      itemStyle: { color: '#1890ff' }
    }
  ]
}))

const transferMatrixOption = computed(() => {
  const realms = ['人道', '天道', '阿修罗道', '畜生道', '饿鬼道', '地狱道']
  const data = []

  realms.forEach((fromRealm, fromIndex) => {
    realms.forEach((toRealm, toIndex) => {
      const value = fromIndex === toIndex ? 0 : Math.floor(Math.random() * 1000 + 100)
      data.push([fromIndex, toIndex, value])
    })
  })

  return {
    tooltip: {
      position: 'top'
    },
    grid: {
      height: '50%',
      top: '10%'
    },
    xAxis: {
      type: 'category',
      data: realms,
      splitArea: {
        show: true
      },
      axisLabel: { color: '#91d5ff' }
    },
    yAxis: {
      type: 'category',
      data: realms,
      splitArea: {
        show: true
      },
      axisLabel: { color: '#91d5ff' }
    },
    visualMap: {
      min: 0,
      max: 1000,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '15%',
      inRange: {
        color: ['#52c41a', '#1890ff', '#722ed1', '#fa8c16', '#eb2f96', '#f5222d']
      },
      textStyle: { color: '#e6f7ff' }
    },
    series: [
      {
        name: '转换数量',
        type: 'heatmap',
        data: data,
        label: {
          show: true,
          color: '#fff'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

const ageDistributionOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['人道', '天道', '阿修罗道', '畜生道', '饿鬼道', '地狱道'],
    textStyle: { color: '#e6f7ff' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['0-18岁', '19-30岁', '31-45岁', '46-60岁', '61-75岁', '76岁以上'],
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' },
    splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
  },
  series: [
    {
      name: '人道',
      type: 'bar',
      stack: 'total',
      data: [3800, 5600, 7200, 8900, 6800, 5200],
      itemStyle: { color: '#52c41a' }
    },
    {
      name: '天道',
      type: 'bar',
      stack: 'total',
      data: [1200, 2800, 3600, 4200, 3800, 2900],
      itemStyle: { color: '#1890ff' }
    },
    {
      name: '阿修罗道',
      type: 'bar',
      stack: 'total',
      data: [800, 1900, 2400, 2800, 2200, 1700],
      itemStyle: { color: '#722ed1' }
    },
    {
      name: '畜生道',
      type: 'bar',
      stack: 'total',
      data: [600, 1400, 1800, 2100, 1600, 1200],
      itemStyle: { color: '#fa8c16' }
    },
    {
      name: '饿鬼道',
      type: 'bar',
      stack: 'total',
      data: [400, 800, 1000, 1200, 900, 700],
      itemStyle: { color: '#eb2f96' }
    },
    {
      name: '地狱道',
      type: 'bar',
      stack: 'total',
      data: [200, 400, 500, 600, 450, 350],
      itemStyle: { color: '#f5222d' }
    }
  ]
}))

// 数据生成函数
function generateTimeData() {
  const months = parseInt(trendPeriod.value)
  const data = []
  const currentDate = new Date()

  for (let i = months - 1; i >= 0; i--) {
    const date = new Date(currentDate.getFullYear(), currentDate.getMonth() - i, 1)
    data.push(`${date.getFullYear()}年${date.getMonth() + 1}月`)
  }
  return data
}

function generateRealmTrendData(realm) {
  const timeData = generateTimeData()
  const data = []
  const baseValues = {
    human: 38.5,
    heaven: 22.3,
    asura: 15.8,
    animal: 12.4,
    ghost: 7.2,
    hell: 3.8
  }
  let baseValue = baseValues[realm]

  timeData.forEach(() => {
    baseValue += (Math.random() - 0.5) * 2
    data.push(Math.round(Math.max(1, baseValue) * 10) / 10)
  })
  return data
}

// 生成表格数据
function generateTableData() {
  const realms = [
    { name: '人道', ratio: 38.5, color: '#52c41a' },
    { name: '天道', ratio: 22.3, color: '#1890ff' },
    { name: '阿修罗道', ratio: 15.8, color: '#722ed1' },
    { name: '畜生道', ratio: 12.4, color: '#fa8c16' },
    { name: '饿鬼道', ratio: 7.2, color: '#eb2f96' },
    { name: '地狱道', ratio: 3.8, color: '#f5222d' }
  ]

  return realms.map((realm, index) => {
    const totalCount = Math.floor(Math.random() * 500000 + 100000)
    const inflowCount = Math.floor(Math.random() * 50000 + 10000)
    const outflowCount = Math.floor(Math.random() * 50000 + 10000)

    return {
      key: index,
      realm: realm.name,
      totalCount: totalCount.toLocaleString(),
      percentage: realm.ratio.toFixed(1),
      monthlyNew: Math.floor(Math.random() * 10000 + 2000).toLocaleString(),
      inflowCount: inflowCount.toLocaleString(),
      outflowCount: outflowCount.toLocaleString(),
      netInflow: inflowCount - outflowCount,
      avgTransferTime: (10 + Math.random() * 30).toFixed(1),
      trend: (Math.random() * 8 - 4).toFixed(1)
    }
  })
}

// 事件处理函数
const handleSearch = (value) => {
  console.log('搜索:', value)
}

const handleTableChange = (pagination, filters, sorter) => {
  tablePagination.current = pagination.current
  tablePagination.pageSize = pagination.pageSize

  if (sorter.field) {
    console.log('排序:', sorter)
  }
}

const exportFlowData = () => {
  message.success('流入流出数据导出成功')
}

const exportData = () => {
  message.success('全部数据导出成功')
}

// 监听器
watch(trendPeriod, () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
})

watch(pieChartType, () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 800)
})

watch(flowType, () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 600)
})

// 组件挂载
onMounted(async () => {
  loading.value = true

  try {
    await new Promise((resolve) => setTimeout(resolve, 1000))

    tableData.value = generateTableData()
    tablePagination.total = tableData.value.length
  } catch (error) {
    message.error('数据加载失败')
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
/* 复用之前的通用样式 */
.statistics-page {
  min-height: 100vh;
  padding: 24px;
}

.page-breadcrumb {
  margin-bottom: 24px;
}

:deep(.ant-breadcrumb) {
  color: #e6f7ff;
}

:deep(.ant-breadcrumb a) {
  color: #1890ff;
}

:deep(.ant-breadcrumb-separator) {
  color: #e6f7ff;
}

.dashboard-header {
  margin-bottom: 32px;
  text-align: center;
}

.ancient-title {
  font-size: 48px;
  font-weight: bold;
  color: #e6f7ff;
  text-shadow: 0 0 10px rgba(24, 144, 255, 0.5);
  margin-bottom: 8px;
}

.header-subtitle {
  font-size: 18px;
  color: #91d5ff;
  margin-bottom: 16px;
}

.header-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

.decoration-line {
  height: 1px;
  width: 100px;
  background: linear-gradient(90deg, transparent, #1890ff, transparent);
}

.decoration-symbol {
  color: #1890ff;
  font-size: 24px;
}

.stats-section {
  margin-bottom: 32px;
}

.stats-grid .ant-col {
  margin-bottom: 20px;
}

.stat-card {
  padding: 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.stat-icon {
  font-size: 24px;
  margin-bottom: 12px;
}

.stat-content {
  text-align: center;
}

.stat-title {
  font-size: 16px;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}

/* 各个道的颜色主题 */
.human-realm {
  background: linear-gradient(135deg, rgba(82, 196, 26, 0.1), rgba(82, 196, 26, 0.2));
  border-color: rgba(82, 196, 26, 0.3);
}

.human-realm .stat-icon,
.human-realm .stat-title,
.human-realm .stat-value,
.human-realm .stat-label {
  color: #52c41a;
}

.heaven-realm {
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.1), rgba(24, 144, 255, 0.2));
  border-color: rgba(24, 144, 255, 0.3);
}

.heaven-realm .stat-icon,
.heaven-realm .stat-title,
.heaven-realm .stat-value,
.heaven-realm .stat-label {
  color: #1890ff;
}

.asura-realm {
  background: linear-gradient(135deg, rgba(114, 46, 209, 0.1), rgba(114, 46, 209, 0.2));
  border-color: rgba(114, 46, 209, 0.3);
}

.asura-realm .stat-icon,
.asura-realm .stat-title,
.asura-realm .stat-value,
.asura-realm .stat-label {
  color: #722ed1;
}

.animal-realm {
  background: linear-gradient(135deg, rgba(250, 140, 22, 0.1), rgba(250, 140, 22, 0.2));
  border-color: rgba(250, 140, 22, 0.3);
}

.animal-realm .stat-icon,
.animal-realm .stat-title,
.animal-realm .stat-value,
.animal-realm .stat-label {
  color: #fa8c16;
}

.ghost-realm {
  background: linear-gradient(135deg, rgba(235, 47, 150, 0.1), rgba(235, 47, 150, 0.2));
  border-color: rgba(235, 47, 150, 0.3);
}

.ghost-realm .stat-icon,
.ghost-realm .stat-title,
.ghost-realm .stat-value,
.ghost-realm .stat-label {
  color: #eb2f96;
}

.hell-realm {
  background: linear-gradient(135deg, rgba(245, 34, 45, 0.1), rgba(245, 34, 45, 0.2));
  border-color: rgba(245, 34, 45, 0.3);
}

.hell-realm .stat-icon,
.hell-realm .stat-title,
.hell-realm .stat-value,
.hell-realm .stat-label {
  color: #f5222d;
}

.main-content {
  margin-bottom: 32px;
}

.content-grid .ant-col {
  margin-bottom: 32px;
}

.chart-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
}

.chart-card .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-card .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.chart-card .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
}

.echarts-container {
  padding: 16px;
  width: 100%;
  min-height: 400px;
  position: relative;
  background: rgba(0, 0, 0, 0.2);
}

.echarts-container > div {
  width: 100% !important;
  height: 100% !important;
}

:deep(.echarts) {
  background: transparent !important;
}

:deep(.ant-spin-nested-loading) {
  background: rgba(0, 0, 0, 0.2);
}

:deep(.ant-spin) {
  color: #1890ff;
}

:deep(.ant-spin-dot i) {
  background-color: #1890ff;
}

.report-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  height: 400px;
}

.report-card .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.report-card .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.report-card .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
  height: calc(100% - 56px);
  overflow-y: auto;
}

.report-content {
  padding: 16px;
}

.report-section {
  margin-bottom: 24px;
}

.report-section h4 {
  color: #40a9ff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  border-left: 3px solid #40a9ff;
  padding-left: 8px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #e6f7ff;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator.positive {
  background: #52c41a;
  box-shadow: 0 0 6px rgba(82, 196, 26, 0.8);
}

.status-indicator.neutral {
  background: #1890ff;
  box-shadow: 0 0 6px rgba(24, 144, 255, 0.8);
}

.status-indicator.warning {
  background: #fa8c16;
  box-shadow: 0 0 6px rgba(250, 140, 22, 0.8);
}

.trend-list,
.suggestion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.trend-list li,
.suggestion-list li {
  color: #e6f7ff;
  font-size: 14px;
  margin-bottom: 6px;
  padding-left: 16px;
  position: relative;
}

.trend-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #52c41a;
}

.suggestion-list li::before {
  content: '※';
  position: absolute;
  left: 0;
  color: #40a9ff;
}

.table-section {
  margin-top: 32px;
}

.table-section .ant-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.table-section .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-section .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.table-section .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
}

:deep(.ant-table) {
  background: transparent;
}

:deep(.ant-table-thead > tr > th) {
  background: rgba(24, 144, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6f7ff;
}

:deep(.ant-table-tbody > tr > td) {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6f7ff;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(24, 144, 255, 0.1);
}

:deep(.ant-pagination) {
  text-align: center;
  margin-top: 24px;
}

:deep(.ant-pagination .ant-pagination-item) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.ant-pagination .ant-pagination-item a) {
  color: #e6f7ff;
}

:deep(.ant-pagination .ant-pagination-item-active) {
  background: #1890ff;
  border-color: #1890ff;
}

:deep(.ant-pagination .ant-pagination-item-active a) {
  color: white;
}

@media (max-width: 768px) {
  .ancient-title {
    font-size: 32px;
  }

  .header-subtitle {
    font-size: 16px;
  }

  .stat-value {
    font-size: 20px;
  }

  .echarts-container {
    padding: 8px;
  }
}
</style>
